<!DOCTYPE html>
<html lang="en">

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no, email=no" />
	<meta charset="UTF-8">
	<title>优购优品网</title>
	<link rel="stylesheet" type="text/css" href="../../css/vant_new.css">
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../../css/local.css" />
	<script type="text/javascript" src="../../script/jquery.js"></script>
	<script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script src="../../script/vant_new.min.js"></script>
	<script type="text/javascript" src="../../script/fastclick.js"></script>
	<script type="text/javascript" src="../../script/base.js"></script>
	<style>
		.pd {
			padding: 10px;
			height: calc(100% - 44px);
			overflow-y: auto;
		}

		.pd>div {
			background: #fff;
			overflow: hidden;
			border-radius: 6px;

		}

		.ov {
			overflow: hidden;
		}

		.checkbox {
			float: left;
			width: 40px;
			height: 90px;
			text-align: center;
			line-height: 90px;
		}

		.van-checkbox {
			display: inline-block;
		}

		.p {
			float: left;
			width: calc(100% - 40px);
			padding: 5px;
		}

		.row {
			position: relative;
		}

		.row .img {
			width: 100px;
			height: 80px;
			border-radius: 4px;
			overflow: hidden;
		}

		.row .img img {
			width: 100%;
			height: 100%;
		}

		.row .desc {
			position: absolute;
			top: 0;
			left: 100px;
			right: 0;
			bottom: 0;
			padding-left: 5px;
		}

		.row .desc .title {
			font-size: 14px;
			height: 40px;
			line-height: 20px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.row .desc .title .hot {
			color: #fff;
			background: #cd1b21;
			font-size: 12px;
			border-radius: 2px;
			margin-right: 5px;
			display: inline-block;
			line-height: 16px;
			padding: 0 2px;
			vertical-align: middle;
		}

		.tag {
			position: relative;
			overflow: hidden;
		}

		.tag>div {
			transform: scale(0.8);
			-webkit-transform-origin-x: 0;
			overflow: hidden;
			width: 128%;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.tag span {
			color: #cd1b21;
			border: 1px solid #ff6e73;
			font-size: 12px;
			border-radius: 2px;
			display: inline-block;
			line-height: 16px;
			padding: 0 2px;
			vertical-align: middle;
			margin-right: 4px;
			margin-bottom: 4px;
		}

		.row .desc .sub-title {
			font-size: 12px;
			color: #969799;
			line-height: 20px;
			height: 40px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.row .desc .sub-title * {
			vertical-align: middle;
		}

		.price {
			color: #cd1b21;
			font-size: 18px;
			line-height: 40px;
		}

		.van-stepper__minus,
		.van-stepper__plus {
			width: 24px;
			height: 24px;
		}

		.van-stepper__input {
			height: 24px;
			line-height: 24px;
		}

		.bottom .van-checkbox {
			display: flex;
		}

		.van-submit-bar__text {
			/* text-align: left; */
		}

		.van-submit-bar__button {
			display: none;
		}
	</style>

</head>

<body>
	<div id="app" v-cloak>
		<div class="init-full">
			<van-nav-bar class="head" title="购物车" left-arrow @click-left="onClickLeft"></van-nav-bar>
			<div class="body-with-bottom">
				<div class="content">
					<div class="search">
						<van-cell title="商品分类" :value="type.name" is-link arrow-direction="down"
							@click="showType = true;"></van-cell>
					</div>
					<div class="pd">
						<div>
							<van-swipe-cell v-for="(item,index) in cartList">
								<div class="ov">
									<div class="checkbox" @click="toggleChecked(item)">
										<van-checkbox icon-size="18" checked-color="#cd1b21" v-model="item.checked">
										</van-checkbox>
									</div>
									<div class="p">
										<div class="row">
											<div class="img">
												<img v-lazy="shoppingMallServerIP + item.ThumbnailUrl160" />
											</div>
											<div class="desc">
												<div class="title"><span
														class="hot">{{item.BrandName}}</span>{{item.ProductName}}</div>
												<div class="price">
													<span style="font-size: 12px;">￥</span>{{item.SalePrice}}
													<div @click.stop="" style="float: right;">
														<van-stepper :integer="true" :min="item.StepNum"
															:max="item.Stock" :step="item.StepNum"
															:disable-input="item.StepNum > 1?true:false"
															v-model="item.Quantity" @change="changeShopNum(item)">
														</van-stepper>
													</div>

												</div>
											</div>
										</div>

									</div>
								</div>
								<template slot="right">
									<van-button square type="danger" text="删除" style="height: 100%;"
										@click.stop="deleteShop(item,index)"></van-button>
								</template>
							</van-swipe-cell>
						</div>
					</div>
				</div>
				<van-loading v-if="showLoading" />
			</div>
			<div class="bottom">
				<van-submit-bar :price="getTotal()">
					<van-checkbox checked-color="#cd1b21" v-model="allChecked" @change="changeAll">全选</van-checkbox>
					<span style="margin-left: 10px;">共选中商品<span style="color:#ee0a24;">{{getTotalNum()}}</span>个</span>
				</van-submit-bar>
			</div>
		</div>

		<van-popup v-model="showType" position="bottom">
			<van-picker :columns="typeList" value-key="CategoryName" show-toolbar @cancel="showType = false;"
				@confirm="onConfirmType"></van-picker>
		</van-popup>

	</div>
</body>
<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();


		Vue.use(vant.Lazyload, {
			loading: '../../image/no.png',
			error: '../../image/no.png'
		});

		var h_userId = api.pageParam.h_userId;


		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				serverIP: 'http://' + FLD.serverIP,
				shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
				allCartList: [],
				cartList: [],
				typeList: [],
				allChecked: false,
				type: {
					name: '全部'
				},
				showType: false
			},
			created: function () {
				this.getCartList();
			},
			methods: {
				onConfirmType(value, index) {
					var that = this;
					that.showType = false;
					that.type.name = that.typeList[index].CategoryName;
					that.allChecked = false;
					that.changeAll(false);
					that.filterCartList();
				},
				filterCartList() {
					var that = this;
					if (that.type.name == '全部') {
						that.cartList = JSON.parse(JSON.stringify(that.allCartList));
					} else {
						that.cartList = that.allCartList.filter(function (item) {
							return item.CategoryName == that.type.name;
						})
					}

				},
				getCartList() {
					var that = this;
					that.showLoading = true;
					FLD.ajax('sp_getShipCarts', { h_userId: h_userId }, function (res) {
						that.showLoading = false;
						that.cartList = res.ds;
						that.allCartList = JSON.parse(JSON.stringify(that.cartList));
						that.typeList = [{ CategoryName: '全部' }].concat(res.ds1);
					})
				},
				toggleChecked(item) {
					var that = this;
					if (typeof item.checked === 'undefined') {
						this.$set(item, 'checked', true);
					} else {
						item.checked = !item.checked;
					}
				},
				changeShopNum(item) {
					var that = this;
					FLD.ajax('sp_updateShipCart', { productId: item.ProductId, quantity: item.Quantity, h_userId: h_userId }, function (res) {
						//修改成功
					})
				},
				deleteShop(item, index) {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否删除该商品?'
					}).then(() => {
						FLD.ajax('sp_deleteShipMart', { productIds: item.ProductId, h_userId: h_userId }, function (res) {
							layer.open({
								content: '商品删除成功!',
								skin: 'msg',
								time: 2
							});
							that.cartList.splice(index, 1);
						})
					}).catch(() => {

					});

				},
				changeAll(v) {
					var that = this;
					if (v) {
						for (var i in that.cartList) {
							this.$set(that.cartList[i], 'checked', true);
						}
					} else {
						for (var i in that.cartList) {
							this.$set(that.cartList[i], 'checked', false);
						}
					}
				},
				getTotal() {
					var that = this;
					var t = 0;
					for (var i in that.cartList) {
						if (that.cartList[i].checked) {
							t += that.cartList[i].Quantity * that.cartList[i].SalePrice;
						}

					}
					return parseInt(t * 100);
				},
				getTotalNum() {
					var that = this;
					var t = 0;
					for (var i in that.cartList) {
						if (that.cartList[i].checked) {
							t += that.cartList[i].Quantity
						}

					}
					return t;
				},
				onSubmit() {
					var that = this;
					var commodityList = [];
					for (var i in that.cartList) {
						if (that.cartList[i].checked) {
							commodityList.push({
								productId: that.cartList[i].ProductId,
								quantity: that.cartList[i].Quantity,
								price: that.cartList[i].SalePrice.toFixed(2),
								skuId: that.cartList[i].SkuId,
								image: that.cartList[i].ThumbnailUrl160,
								name: that.cartList[i].ProductName
							})
						}

					}
					if (commodityList.length) {
						api.openWin({
							name: 'submitOrder',
							url: 'submitOrder.html',
							reload: true,
							slidBackEnabled: false,
							pageParam: {
								commodityList: commodityList,
								formType: '购物车'
							}
						})
					}

				},
				onClickLeft() {

					api.closeWin();
				}
			}
		})
	};
</script>

</html>